<script>
import { useAppStore } from '@/stores/app';
import useContactsStore from '@/stores/contacts';
import { mapStores } from 'pinia';
import { Empty, SwipeCell } from 'vant';

export default {
  components: {
    SwipeCell,
    Empty
  },
  computed: {
    ...mapStores(useAppStore, useContactsStore)
  },
  data() {
    return {
    }
  },
  methods: {
    handleChat(item) {
      this.$router.push({ path: `/chat/${item.GroupId.replace('@TGS#', '@TGS$')}`, query: { name: item.groupInfo?.Name } })
    }
  },
}
</script>

<template>
  <div class="new-friends">
    <div class="contacts-list">
      <SwipeCell
        v-for="item in contactsStore.groups"
        :key="item.GroupId"
      >
        <div class="contacts-item" @click="handleChat(item)">
          <div class="contacts-item-info">
            <img class="contacts-item-avatar" :src="item.groupInfo?.avatar_url ?? item.avatar_url" alt="">
            <div class="contacts-item-name">
              <div class="contacts-item-nickname">{{ item.groupInfo?.Name }}</div>
              <div class="contacts-item-uid">GroupId: {{ item.groupInfo?.Member }}</div>
            </div>
          </div>

          <img class="contacts-item-send" src="../assets/icons/send.png" alt="">
        </div>
      </SwipeCell>

      <Empty v-if="contactsStore.groups.length === 0" description="暂未加入群聊"></Empty>
    </div>
  </div>
</template>

<style lang="less" scoped>
.new-friends {
  height: 100%;

  .contacts-item-avatar {
    object-fit: cover;
  }

  .van-swipe-cell {
    &:not(:last-child) {
      .contacts-item {
        border-bottom: 1px solid #f0f0f0;
      }
    }
  }

  .list-group {
    padding: 0 15px;
    font-size: 14px;
    color: #bbb;
  }

  .contacts-item-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    height: 100%;

    .contacts-item-action {
      padding: 0 5px;
      height: 40px;
      line-height: 40px;
    }
  }

  .contacts-item-action-reject {
    color: #f44;
    font-size: 14px;
  }

  .contacts-item-action-agree {
    font-size: 14px;
    color: #07c160;
  }

  .contacts-list {
    &:not(:last-child) {
      border-bottom: 1px solid #f0f0f0;
    }
    .contacts-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 15px;
      padding: 15px 0;
      margin: 0 15px;

      .contacts-item-info {
        display: flex;
        align-items: center;
        gap: 15px;
        overflow: hidden;
      }

      .contacts-item-send {
        width: 24px;
        height: 24px;
      }

      &-avatar {
        width: 40px;
        height: 40px;
        border-radius: 4px;
        object-fit: cover;
      }

      .contacts-item-name {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-size: 16px;
        overflow: hidden;

        >div {
          text-overflow: ellipsis;
          overflow: hidden;
          text-wrap: nowrap;
        }

        .contacts-item-uid {
          font-size: 13px;
          color: #999;
        }
      }
    }
  }
}
</style>
